<template>
  <div class="mz-banner swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../../assets/img/11.jpeg" alt=""></div>
        <div class="swiper-slide"><img src="../../assets/img/22.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../../assets/img/33.jpg"></div>
    </div>
  <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
   
</div>
</template>

<script>
import Swiper from 'swiper';
export default {
  name: 'Banner',
  data () {
    return {
<<<<<<< HEAD
     
=======
      msg: 'Welcome to Your Vue.js App'
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }
  },
  mounted(){
     new Swiper ('.swiper-container', {
    loop: true,
    pagination: '.swiper-pagination',
     autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },
   
   
  })        
  }
}
</script>
<style lang="scss">
@import "~swiper/dist/css/swiper.css";


.mz-banner {
  height: 600px;

  .swiper-slide{
    
    img{
        height: 100%;
        width: 100%;
    }        

  }
}
</style>
